<template>
  <a-list :split="false">
    <a-list-item>
      <template #actions>
        <a-select
          size="small"
          style="width: 80px;"
          :default-value="contentWidth"
          @change="handleContentWidthChange"
        >
          <a-select-option value="Fixed">
            {{ $t('app.setting.content-width.fixed') }}
          </a-select-option>
          <a-select-option v-if="layout !== 'side'" value="Fluid">
            {{ $t('app.setting.content-width.fluid') }}
          </a-select-option>
        </a-select>
      </template>
      <a-list-item-meta>
        <template #title>
          <div> {{ $t('app.setting.content-width') }}</div>
        </template>
      </a-list-item-meta>
    </a-list-item>
    <a-list-item>
      <template #actions>
        <a-switch size="small" :disabled="!fixedHeader" :default-checked="fixedHeader" @change="handleFixedHeader" />
      </template>
      <a-list-item-meta>
        <template #title>
          <div> {{ $t('app.setting.fixedheader') }}</div>
        </template>
      </a-list-item-meta>
    </a-list-item>
    <a-list-item>
      <template #actions>
        <a-switch size="small" :disabled="(layout === 'top')" :default-checked="fixSiderbar" @change="handleFixSiderbar" />
      </template>
      <a-list-item-meta>
        <template #title>
          <div> {{ $t('app.setting.fixedsidebar') }}</div>
        </template>
      </a-list-item-meta>
    </a-list-item>
    <!--                <a-list-item>-->
    <!--                    <template #actions>-->
    <!--                        <a-select>-->
    <!--                            <a-select-option>-->
    <!--                                {{$t('app.setting.content-width.fixed')}}-->
    <!--                            </a-select-option>-->
    <!--                        </a-select>-->
    <!--                    </template>-->
    <!--                    <span>{{$t('app.setting.content-width')}}</span>-->
    <!--                </a-list-item>-->
  </a-list>
</template>

<script>
    import { defineComponent, watchEffect, toRefs, reactive } from 'vue'

    export default defineComponent({
        name: 'LayoutSetting',
        props: {
            contentWidth: {
                type: String
            },
            fixedHeader: {
                type: Boolean
            },
            fixSiderbar: {
                type: Boolean
            },
            layout: {
                type: String
            },
            i18nRender: {
                type: Function
            }
        },
        setup(props, { emit }) {
            const handleContentWidthChange = (value) => {
                emit('onChange', { type: 'contentWidth', value })
            }
            const handleFixedHeader = (value) => {
                emit('onChange', { type: 'fixedHeader', value })
            }
            const handleFixSiderbar = (value) => {
                emit('onChange', { type: 'fixSiderbar', value })
            }
            // const {contentWidth,fixedHeader,fixSiderbar,layout,i18nRender} = toRefs(props)
            watchEffect(() => {
                 console.log(` ` + { ...props }) // Will not be reactive!
            })
            return {
               handleContentWidthChange, handleFixedHeader, handleFixSiderbar
            }
        }
    })
</script>
